<!-- 登录 -->
<template>
  <div class="page-account">
    <div class="page-account-container">
      <div class="page-account-login-bg">
        <img src="../../../assets/images/login-bg.png"/>
      </div>
      <!-- <Button @click="messageFn()">加解密</Button> -->
      <div class="page-account-login">
        <div class="login-container">
          <div class="page-header">
            <h1>欢迎登录<br />经营一体化系统</h1>
          </div>
          <!-- <div>
            <span>没有账号吗？</span>
            <a @click="regiserNewAccount()">注册新的账号</a>
          </div> -->
          <div class="page-tab">
            <Tabs value="passwordLogin">
              <TabPane label="密码登录" name="passwordLogin">
                <div class="login">
                  <Login @on-submit="handleSubmit">
                    <UserName name="username" />
                    <Password name="password" />
                    <div class="demo-auto-login">
                      <Checkbox v-model="autoLogin" size="large"
                        >自动登录</Checkbox
                      >
                      <a @click="retrievePassword()">忘记密码</a>
                    </div>
                    <Submit :loading="isLoading"/>
                  </Login>
                </div>
              </TabPane>
              <TabPane label="验证码登录" name="verificationCodeLogin">
                <div class="login">
                  <Login @on-submit="handleCodeSubmit">
                    <Mobile name="mobile" @on-change="handleChangeMobile" />
                    <Captcha
                      name="captcha"
                      :field="['mobile']"
                      :count-down="count"
                      @on-get-captcha="handleGetCaptcha"
                    >
                      <template #text>
                        <slideVerify ref="slideVerify" @captchaFn="captchaFn"
                          ><span>获取验证码</span></slideVerify
                        >
                      </template>
                    </Captcha>
                    <Submit :loading="isLoading"></Submit>
                  </Login>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import mixins from "../mixins";
import slideVerify from "@/components/slideVerify";
// import { SlideVerify } from "vue-monoplasty-slide-verify";

import { frameInRoutes } from "@/router/routes";
import BasicLayout from "@/layouts/basic-layout";

import { encryptByDES, decryptByDES } from "@/utils/encrypFile.js";

import {
  getSlideVerifyImage,
  ValidSlideVerifyImage, // 上传滑块位置
  SendVerifyMobileSms, // 获取验证码
} from "@/api/common.js";

export default {
  mixins: [mixins],
  components: { slideVerify },
  data() {
    return {
      autoLogin: true,
      isShow: true,
      count: 60,
      moblie: "",
      isLoading: false,
    };
  },
  methods: {
    ...mapActions("admin/account", ["login"]),
    //账号密码登录
    handleSubmit(valid, values) {
      if (valid) {
        const { username, password } = values;
        console.log(username, password)
        this.isLoading = true;
        this.login({
          username,
          password,
          type: 1,
        }).then(() => {
          let meta = {
            auth: true,
          };
          let routes = [
            {
              path: "/",
              name: "home",
              redirect: {
                name: `homepage`,
              },
              meta,
              component: BasicLayout,
              children: [
                {
                  path: "/home",
                  name: `homepage`,
                  meta: {
                    ...meta,
                    title: "首页",
                    closable: false,
                  },
                  component: () => import("@/pages/home"),
                },
              ],
            },
          ];
          this.$router.addRoutes(routes);
          // 完整的 frameInRoutes，更新 vuex 的数据
          const newRoutes = frameInRoutes.concat(routes);
          this.$store.commit("admin/page/init", newRoutes);
          console.log(newRoutes, "newRoutes");
          // return;
          // 重定向对象不存在则返回顶层路径
          this.$router.replace(this.$route.query.redirect || "/home");
          this.isLoading = false;
        }).catch(() => {
          this.isLoading = false;
        });
      }
    },
    // 手机号变更
    handleChangeMobile(val) {
      this.moblie = val;
    },
    //获取验证码
    handleGetCaptcha() {
      this.$refs.slideVerify.innuser();
    },
    async captchaFn() {
      let params = {
        xOffset: 20,
      };
      let data = await getSlideVerifyImage();
      // let xOffsetData = await ValidSlideVerifyImage(params);
      console.log(this.$refs.MobileBox);
      let verifyParams = {
        mobile: this.moblie,
      };
      let verifyCode = await SendVerifyMobileSms(verifyParams);
      console.log(data, "data", verifyCode);
      this.isShow = false;
      this.count = 60;
    },
    regiserNewAccount() {
      this.$router.push({
        name: "register",
      });
    },
    //验证码登录
    handleCodeSubmit(valid, { mobile, captcha }) {
      this.login({
        username: mobile,
        password: captcha,
        type: 2,
      }).then(() => {});
      console.log(mobile, captcha, "mobile, captcha");
    },
    // 忘记密码
    retrievePassword() {
      this.$router.push({
        path: "/retrievePassword",
      });
    },
    messageFn() {
      encryptByDES("ppoi");
      let se = encryptByDES("ppoi");
      console.log(se);
      decryptByDES(se);
    },
  },
};
</script>

<style lang="less" scoped>
.page-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background-image: url("../../../assets/svg/body.svg");

  .page-account-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;

    .page-account-login {
      background: #fff;
      width: 680px;
      display: flex;
      align-items: center;

      .login-container {
        margin: 0 auto;

        h1 {
          color: #333;
        }

        .page-tab {
          width: 420px;
          padding: 30px 10px;

          ::v-deep .ivu-tabs-bar {
            border-bottom: 0;
          }

          ::v-deep .ivu-tabs-nav-scroll {
            display: flex;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
          }
        }

        .login {
          padding: 10px 0;

          ::v-deep .demo-auto-login {
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
          }
        }

        // ::v-deep .ivu-btn-primary {
        //   background-color: #515a6e !important;
        //   border-color: #515a6e !important;
        // }

        ::v-deep .ivu-tabs-tab-active {
          color: #333 !important;
        }

        ::v-deep .ivu-tabs-tab:hover {
          color: #333 !important;
        }

        ::v-deep .ivu-tabs-ink-bar {
          height: 3px;
          background-color: #333 !important;
        }

        ::v-deep .ivu-checkbox-wrapper.ivu-checkbox-large {
          font-size: 14px !important;
        }

        ::v-deep a {
          color: #999 !important;
        }

        ::v-deep .ivu-input:hover {
          border-color: #dcdee2 !important;
        }
      }
    }
    .page-account-login-bg{
      height: 100vh;
      width: calc(~'100vw - 680px');
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
      }
    }
  }
}
</style>
